<template>
    <div style="min-height:750px" ref="myPhotoDiv">
        <el-row>
            <el-form :model="pictureForm" ref="pictureForm" size="small" :inline="true" label-width="78px">
                <el-form-item label="顾客信息" prop="visitNum">
                    <el-select v-model="pictureForm.visitNum" placeholder="顾客信息"  clearable class="w450"
                        @change="search">
                        <el-option v-for="item in baseInfoData" :key="item.visitId"
                            :label="'顾客编号：' + item.visitNum + ' 状态：' + getDiagnosisStatusLabel(item.status) + ' 诊断：' + item.doctorDiagnosis"
                            :value="item.visitNum"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="光照类型" prop="faceLight">
                    <el-select v-model="pictureForm.faceLight" placeholder="光照类型" style="width: 120px" clearable
                        @change="search">
                        <el-option v-for="dict in dict.type.photo_lighting_type" :key="dict.value" :label="dict.label"
                            :value="dict.value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="脸部部位" prop="facePart">
                    <el-select v-model="pictureForm.facePart" placeholder="脸部部位" style="width: 120px;margin-left: 10px"
                        clearable @change="search">
                        <el-option v-for="dict in dict.type.sys_face_part" :key="dict.value" :label="dict.label"
                            :value="dict.value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="拍照设备" prop="type">
                    <el-select v-model="pictureForm.type" placeholder="拍照设备" style="width: 120px" clearable
                        @change="search">
                        <el-option v-for="dict in dict.type.photo_upload_type" :key="dict.value" :label="dict.label"
                            :value="dict.value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="采集日期">
                    <el-date-picker v-model="dateRange" style="width: 240px" value-format="yyyy-MM-dd" type="daterange"
                        range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"
                        @change="search"></el-date-picker>
                </el-form-item>
                <el-button type="primary" size="mini" @click="search">查询</el-button>
            </el-form>
        </el-row>
        <!-- <el-row style="margin-top:15px;" class="imgs">
            <div v-for="(item, index) in comparePicData" style="margin: 14px;">
             
                <div class="user-info-head">
                    <el-image class="img-style" fit="contain" :src="item.thumbnail" alt=""
                        @click="watchBigPic(item, index)"></el-image>
                </div>
                <div class="pic-info">
                    <div>{{ item.createTime }}</div>
                    <dict-tag :options="dict.type.sys_diagnosis_status" :value="item.status" />
                    <dict-tag :options="dict.type.photo_upload_type" :value="item.type" />
                    <dict-tag :options="dict.type.photo_lighting_type" :value="item.faceLight" />
                    <dict-tag :options="dict.type.sys_face_part" :value="item.facePart" />
                    <div>{{ (item.fileSize / 1024 / 1024).toFixed(2) }}M(压缩质量:{{ item.compressionRatio }})</div>
                    <div v-if="item.scoreAi" style="color: #1890ff">Ai mMASI评分:{{ (item.scoreAi).toFixed(1) }}分</div>
                </div>
            </div>
        </el-row> -->
        <el-row class="photoImageContent" :gutter="10">

            <el-col :xs="8" :sm="6" :md="6" :lg="{ span: '4-8' }" :xl="{ span: '4-8' }"
            v-for="(item, index) in comparePicData" :key="index">

                <div class="text-center">
                    <div class="user-info-head">
                        <el-image class="img-style" fit="contain" :src="item.thumbnail" alt=""
                            @click="watchBigPic(item, index)"></el-image>
                    </div>
                    <div class="photoImageContent_formBox_infos">
                        <div>{{ item.createTime }}</div>
                        <dict-tag :options="dict.type.sys_diagnosis_status" :value="item.status" />
                        <dict-tag :options="dict.type.photo_upload_type" :value="item.type" />
                        <dict-tag :options="dict.type.photo_lighting_type" :value="item.faceLight" />
                        <dict-tag :options="dict.type.sys_face_part" :value="item.facePart" />
                        <div>{{ (item.fileSize / 1024 / 1024).toFixed(2) }}M(压缩质量:{{ item.compressionRatio }})</div>
                        <div v-if="item.scoreAi" style="color: #1890ff">Ai mMASI评分:{{ (item.scoreAi).toFixed(1) }}分</div>

                    </div>

                </div>
            </el-col>

        </el-row>
        <el-dialog title="照片标注" :visible.sync="picMarkDialogVisible" width="100%" center :close-on-click-modal="false"
            :append-to-body="true"  class="nopaddingBody fullDialog" >
            <PhotoMark :currentUrl="currentUrl" :imgList="imgList" :myImgIndex="myImgIndex" :notSharePageEnter="false" @closedEvent="picMarkDialogVisible=false"
                v-if="picMarkDialogVisible">
            </PhotoMark>
        </el-dialog>
   
    </div>
</template>

<script>
import myImg from "@/views/components/myImg/myMainImg.vue";
import { delPhotoByGroup } from "@/api/photoWorkstation/photoList";
import { listPhotos } from "@/api/patients/patient";
import PhotoMark from "@/views/components/photoMark/photoMark.vue";
import { getVisit } from "@/api/patientRegistration/registrationList";
export default {
    name: "comparePics",
    components: { myImg, PhotoMark},
    props: {
        patientId: {
            type: Number,
            default: null,
        }
    },
    dicts: ["sys_diagnosis_status", "photo_upload_type", "photo_lighting_type", "sys_face_part",],
    data() {
        return {
            baseUrl: process.env.VUE_APP_BASE_API,
            comparePicData: [],
            dateRange: [],
            previewSrcList: [],
            fileSizeListData: [],
            pictureForm: {
                pageNum: 1,
                pageSize: 9999,
                faceLight: '',
                facePart: '',
                type: '',
                patientId: ''
            },
            picMarkDialogVisible: false,
            currentUrl: '',
            imgList: [],
            myImgIndex: '',
            baseInfoData: [],
        };
    },
    created() {
        this.getPatientList();
        this.search();
    },
    mounted() {
        const el = this.$refs.myPhotoDiv
        el.addEventListener('contextmenu', this.handleRightClick)


    },
    methods: {
        handleRightClick(event) {
            event.preventDefault()
        },
        watchBigPic(row, index) {
            this.myImgIndex = index
            this.currentUrl = row.photoAddress
            this.imgList = this.comparePicData
            this.picMarkDialogVisible = true
        },
        // 获取顾客登记列表
        getPatientList() {
            const queryParams = { pageNum: 1, pageSize: 9999, patientId: this.patientId }
            getVisit(queryParams).then(
                (response) => {
                    this.baseInfoData = response.rows
                    this.baseInfoData.forEach(item => {
                        item.doctorDiagnosis = item.doctorDiagnosis.replace(/ *\([^)]*\) */g, "")
                    })
                }
            )
        },
        //获取诊断状态字典值对应的label
        getDiagnosisStatusLabel(status) {
            let label = ''
            this.dict.type.sys_diagnosis_status.forEach((item) => {
                if (item.value == status) {
                    label = item.label
                }
            })
            return label
        },
        //查询
        search() {
            this.pictureForm.patientId = this.patientId
            this.getPhotoList()
        },
        //根据病人id获取图片列表
        getPhotoList() {
            listPhotos(this.addDateRange(this.pictureForm, this.dateRange)).then((res) => {
                if (res.rows.length > 0) {
                    this.fileSizeListData = []
                    this.previewSrcList = []
                    this.comparePicData = res.rows;
                    this.comparePicData.forEach((it) => {
                         it.photoIndex=it.pIndex
                        if (it.score && JSON.parse(it.score).left) {
                            it.scoreAi = 0.3 * JSON.parse(it.score).left.area * JSON.parse(it.score).left.color
                        }
                        if (it.score && JSON.parse(it.score).brow) {
                            it.scoreAi = 0.3 * JSON.parse(it.score).brow.area * JSON.parse(it.score).brow.color + 0.1 * JSON.parse(it.score).chin.area * JSON.parse(it.score).chin.color
                        }
                        if (it.score && JSON.parse(it.score).right) {
                            it.scoreAi = 0.3 * JSON.parse(it.score).right.area * JSON.parse(it.score).right.color
                        }
                        it.points = this.formatPoints(it.points)
                        it.doctorDiagnosis = it.doctorDiagnosis.replace(/ *\([^)]*\) */g, "")
                        this.previewSrcList.push(this.baseUrl + it.photoAddress)
                        this.fileSizeListData.push(`<div>姓名:${it.patientName}</div><div>年龄:${it.age}</div><div >医生诊断:${it.doctorDiagnosis}</div><div>采集状态:${this.matchDict('sys_diagnosis_status', it.status)}</div><div>采集设备:${this.matchDict('photo_upload_type', it.type)}</div><div>采集日期:${it.createTime}</div><div>采集人:${it.createBy}</div><div >${it.scoreAi ? 'Ai mMASI评分:' + it.scoreAi + '分' : ''} </div ><div style='margin-top:20px'>光照类型:${this.matchDict('photo_lighting_type', it.faceLight)}</div><div>部位:${this.matchDict('sys_face_part', it.facePart)}</div><div>文件大小:${(it.fileSize / 1024 / 1024).toFixed(2)}M</div><div>压缩比:${it.compressionRatio}</div>`)

                    })
                } else {
                    this.comparePicData = [];
                }
                console.log('this.previewSrcList', this.previewSrcList)
            });
        },
        //格式化画图组件点位格式数据
        formatPoints(data) {
            if (data != null) {
                let mData = []
                console.log(JSON.parse(data))
                JSON.parse(data).forEach((item, index) => {
                    let itPoint = []
                    item.forEach((it, mindex) => {
                        itPoint.push({ x: it[0], y: it[1] })
                        if (item.length - 1 === mindex) {
                            //最后一个点连接到第一个点形成闭合
                            itPoint.push({ x: item[0][0], y: item[0][1] })
                        }
                    })
                    mData.push({ points: itPoint, type: 'route' })
                })
                console.log(mData)
                return mData
            } else {
                return null
            }
        },
        /** id转化成对应的文字 */
        matchDict: function (key, id) {
            let _this = this;
            const result = _this.dict.type[key];
            let textValue = "";
            result.forEach((item) => {
                if (item.raw.dictValue == id) {
                    textValue = item.raw.dictLabel;
                }
            });
            return textValue;
        },

    },
};
</script>
<style scoped rel="stylesheet/scss"  lang="scss">
::v-deep .el-dialog {
    margin-top: 0 !important;
}

::v-deep .el-dialog:not(.is-fullscreen) {
    margin-top: 0 !important;
}

.imgs {
    display: flex;
    flex-wrap: wrap;
    text-align: center;
    margin: 14px;

    .user-info-head {
        width: 260px;
        height: 412px;

        //border: 1px solid #000;
        .img-style {
            width: 100%;
            height: 100%;

            ::v-deep .el-image__error {
                opacity: 0;
            }
        }
    }
}

.group-info {
    display: flex;
}

.group-info span {
    margin-right: 15px;
}

.group-info .device div {
    display: inline-block;
    vertical-align: middle;
}
.w450{width: 450px}
@media only screen and (max-width: 1000px) {
    .w450{width: 200px}
}

.photoImageContent {
    .user-info-head {
        position: relative;
        display: inline-block;
        width: 200px;
        height: 317px;
        border: 1px solid #000;

      .rightNum {
        position: absolute;
        top: 0;
        right: 0;
        width: 20px;
        height: 20px;
        color: red;
        font-weight: bold;
        opacity: 1;
      }

      .rightIcon {
        position: absolute;
        top: 0;
        right: 0;
        width: 20px;
        height: 20px;
        color: red;
        font-weight: bold;
        opacity: 0;
      }

      .leftEnlarge {
        position: absolute;
        top: 0;
        left: 0;
        width: 30px;
        height: 30px;
        color: red;
        opacity: 0;
      }

      .img-style {
        width: 100%;
        height: 100%;

        .el-image__error {
          opacity: 0;
        }
      }

      .img-styleCamera {
        position: relative;
        top: 50%;
        transform: translateY(-50%);

        .el-image__error {
          opacity: 0;
        }
      }

      &:hover {
        .rightNum {
          opacity: 0;
        }

        .rightIcon {
          opacity: 1;
        }

        .leftEnlarge {
          opacity: 1;
        }

      }
    }

    &_formBox {
      margin: 0 auto;
      margin-top: 10px;
      width: 200px;

      &_infos {
        height:150px;
      }
    }

    &_input {
      width: 100%
    }

  }
  .idNumInput {
    width: 202px;
    margin-right: 10px;

    &_code {
      width: 150px;
    }
  }
  ::v-deep .noLabelItem .el-form-item__content {
    margin-left: 0px !important;
  }
  @media screen and (min-width: 1200px) {

 .main-container-content {
      width: 1200px;
      font-size: 16px;
    }
  

    ::v-deep .el-col-lg-4-8 {
      width: 20%;
    }
  }
  
  @media screen and (min-width: 993px) and (max-width:1199px) {
  
 .main-container-content {
      width: 993px;
      font-size: 16px;
    }
    .idNumInput {
        width: 170px;
        margin-right: 10px;
      }
  
      .idNumInput0 {
        width: 290px;
      }
  
      .sexInput {
        width: 112px;
      }
    
  }
  
  @media screen and (min-width: 768px) and (max-width:992px) {
  
  
 .main-container-content {
      width: 768px;
      padding: 10px !important;
      font-size: 14px;
    }
  
  
  

  
       // 图片上传组件 start
       .photoImageContent {
        &_formBox {
          //3张
          width: 150px;
          margin-top: 8px;
        }
  
        .user-info-head {
          //3张
          width: 150px;
          height: 237px;
        }
      }
  
  
  
  }
  
  @media screen and (min-width: 550px) and (max-width:767px) {
  
  
  .main-container-content {
      width: 100%;
      padding: 10px !important;
      font-size: 14px;
    }
      .photoImageContent {
        &_formBox {
          //3张
          width: 150px;
          margin-top: 8px;
        }
  
        &_input {
          width: 100%
        }
  
        .user-info-head {
          //3张
          width: 150px;
          height: 237px;
        }
      }
  
      // 图片上传组件 end

   
  

  }
  
  @media screen and (max-width:550px) {
  
    .sexInput {
        width: 90px; //78
      }
  
      .idNumInput {
        width: 180px;
        margin-right: 6px;
      }
  
      .idNumInput0 {
        width: 276px;
      }
    .main-container-content {
      width: 100%;
      padding: 10px !important;
      box-sizing: border-box;
      font-size: 12px;
    }
      // 图片上传组件 start
      .photoImageContent {
        &_formBox {
          margin-top: 6px;
          width: 90px;
          
          &_infos{
            font-size:12px;
          }
        }
  
        .user-info-head {
          //3张
          width: 90px;
          height: 142px;
        }
      }
    
      // 图片上传组件 end
    
  }
  
  @media screen and (max-width:390px) {
  
    .sexInput {
        width: 80px; //78
      }
  
      .idNumInput {
        width: 150px;
        margin-right: 3px;
      }
  
      .idNumInput0 {
        width: 230px;
      }
        // 图片上传组件 start
  .photoImageContent {
    &_formBox {
      margin-top: 6px;
      width: 90px;
      
      &_infos{
        font-size:12px;
        height:140px;
      }
    }
   
    .user-info-head {
      //3张
      width: 90px;
      height: 142px;
    }
   }
  }
</style>
